<template>
  <Drawer :destroyOnClose="true" v-model:visible="visible" width="800px" title="域名配置">
    <div class="text-sl-textGray text-14px mb-10px text-sm w-700px">
      <div class="justify-center w-full flex mb-10px">
        <Button mx-auto type="danger" ghost>重要提示</Button>
      </div>
      <ul>
        <li>1.修改管理后台域名与证书配置会对业务有影响，建议使用泛域名证书</li>
        <li>
          2.请确认新域名做好了ICP备案并在华为云做好了接入备案，新ICP备案一般需要15-30天左右，新接入备案一般约需要7天左右，根据不同情况时间可能有所不同
        </li>
        <li>3.修改域名之后需要在域名和证书提交成功之后修改DNS配置</li>
        <li>4.修改该敏感配置需要校验密码，并做二次校验</li>
      </ul>
    </div>

    <Divider />
    <div>
      当前域名：<a>{{ props.domainName }}</a>
    </div>
    <Divider />
    <Form :model="domainForm" ref="formRef" :rules="rules">
      <FormItem name="name" label="新域名" class="">
        <Input placeholder="请输入新域名（泛域名）" v-model:value="domainForm.name" class="w-400px" width="100px">
        </Input>
      </FormItem>
      <FormItem name="icpRecordNum" label="ICP备案号" class="">
        <Input v-model:value="domainForm.icpRecordNum" placeholder="请输入ICP备案号" class="w-400px" width="100px">
        </Input>
      </FormItem>
      <FormItem name="certificateType" label="证书类型" class="">
        <RadioGroup v-model:value="domainForm.certificateType">
          <Radio v-for="type in certificateType" :key="type.value" :value="type.value">{{ type.desc }}</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem name="certificateName" label="证书名称" class="">
        <Input v-model:value="domainForm.certificateName" placeholder="请输入证书名称" class="w-600px" width="100px">
        </Input>
      </FormItem>
      <FormItem name="certificateContent" label="证书内容" class="">
        <Textarea
          :autoSize="{ minRows: 4, maxRows: 8 }"
          v-model:value="domainForm.certificateContent"
          placeholder="请输入PEM格式证书内容"
          class="w-600px h-200px"
        >
        </Textarea>
      </FormItem>
      <FormItem name="certificateSecretKey" label="证书私钥" class="">
        <Textarea
          :autoSize="{ minRows: 4, maxRows: 8 }"
          v-model:value="domainForm.certificateSecretKey"
          placeholder="请输入PEM格式证书私钥"
          class="w-600px h-200px"
        >
        </Textarea>
      </FormItem>
    </Form>

    <template #footer>
      <div class="float-right">
        <Button @click="closeDrawer" class="mr-10px">取消</Button>
        <Button @click="openValidityModal" type="primary">提交</Button>
      </div>
    </template>
  </Drawer>
  <ValidityModal pageType="UPDATE_DOMAIN" @success="submitForm" ref="validityModalRef" />
  <SuccessModal ref="successModalRef" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Drawer, Form, Button, FormItem, Input, Radio, RadioGroup, Textarea, Divider } from 'ant-design-vue';
import ValidityModal from './ValidityModal.vue';
import { updateTenantDomainConfig } from '../../../../api/system-mgmt/system-config/systemConfig';
import { getUserId } from '../../../../hooks/globVar/index';
import { useMessage } from '../../../../hooks/web/useMessage';
import SuccessModal from './successModal.vue';

const props = defineProps({
  domainName: String,
});
const visible = ref<boolean>(false);

const userid = getUserId();
const emits = defineEmits(['success']);
const formRef = ref(null);

let domainForm = ref({
  name: undefined,
  icpRecordNum: undefined,
  certificate: {
    type: undefined,
    name: undefined,
    content: undefined,
    secretKey: undefined,
  },
  certificateName: undefined,
  certificateContent: undefined,
  certificateSecretKey: undefined,
  certificateType: undefined,

  verify: {
    password: undefined,
    code: undefined,
    codeType: undefined,
  },

  userid,
});

const validityModalRef = ref(null);
const successModalRef = ref(null);
const { createMessage } = useMessage();
const certificateType = ref(null);

const rules = {
  name: [
    {
      required: true,
      message: '域名校验未通过,要求至少是二级域名，且不允许是泛域名',
      trigger: 'blur',
      pattern: /^([a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]\.){2,}[a-zA-Z]{2,}$/,
    },
  ],
  icpRecordNum: [
    {
      required: true,
      message: '请填写ICP备案号',
      trigger: 'blur',
    },
  ],
  certificateName: [
    {
      required: true,
      message: '请输入证书名称',
      trigger: 'blur',
    },
  ],
  certificateType: [
    {
      required: true,
      message: '请选择证书类型',
      trigger: 'blur',
    },
  ],
  certificateContent: [
    {
      required: true,
      message: '请输入PEM格式证书内容',
      trigger: 'blur',
    },
  ],
  certificateSecretKey: [
    {
      required: true,
      message: '请输入PEM格式证书密钥内容',
      trigger: 'blur',
    },
  ],
};

const openDrawer = () => {
  visible.value = true;
};
const closeDrawer = () => {
  visible.value = false;
};

const setDomainForm = (domainFormData) => {
  domainForm.value = domainFormData;
};

const openValidityModal = async () => {
  await formRef.value.validateFields();
  validityModalRef.value.openModal();
};

const submitForm = async (verifyData) => {
  domainForm.value.certificate.name = domainForm.value.certificateName;
  domainForm.value.certificate.content = domainForm.value.certificateContent;
  domainForm.value.certificate.secretKey = domainForm.value.certificateSecretKey;
  domainForm.value.certificate.type = domainForm.value.certificateType;
  domainForm.value.verify = verifyData;
  const res = await updateTenantDomainConfig(domainForm.value);
  validityModalRef.value.closeModal();
  validityModalRef.value.clearForm();
  successModalRef.value.openModal();
  createMessage.success(res);
  emits('success');
};

const setCertificateType = (certificateTypeData) => {
  certificateType.value = certificateTypeData;
};

defineExpose({
  openDrawer,
  closeDrawer,
  setDomainForm,
  setCertificateType,
});
</script>

<style lang="less" scoped>
ul {
  list-style-type: none;
  line-height: 20px;
  li {
    margin-bottom: 5px;
  }
}
</style>
